<template>
  <c-back-wrap :loading="loading" go-page="经销商营销信息管理" :before-call-back="$goBackCall" current-page="编辑">
    <CustomerArchiveBaseInfo :detail="detail" />
    <c-title title="客户管理信息">
      <QupFormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="120px">
          <el-form-item prop="isManageAnomaly" label="是否异常经营">
            <el-switch v-model="formData.isManageAnomaly" :active-value="1" :inactive-value="0" @change="handleChange" />
          </el-form-item>
          <el-form-item v-if="[1, '1'].includes(formData.isManageAnomaly)" prop="manageAnomalyType" label="市场异常经营类型">
            <c-dict-select v-model="formData.manageAnomalyType" dict-type-code="CTM_ABNORMAL_OPERATION_TYPE" clearable placeholder="市场异常经营类型" style="width:100%" />
          </el-form-item>
          <el-form-item prop="enable" label="启用状态">
            <span>{{ [1,'1'].includes(formData.enable)?'启用':'停用' }}</span>
          </el-form-item>
          <el-form-item prop="marketType" label="市场层级分类">
            <c-dict-select v-model="formData.marketType" dict-type-code="CTM_MARKET_LEVLE" clearable placeholder="市场层级分类" style="width:100%" />
          </el-form-item>
          <el-form-item v-if="[1,'1'].includes(formData.isManageAnomaly)" prop="manageAnomalyTypeRemark" label="市场经营异常备注" :span="24">
            <el-input v-model="formData.manageAnomalyTypeRemark" type="textarea" show-word-limit maxlength="1024" :autosize="{minRows: 2}" placeholder="市场经营异常备注" style="width:100%" />
          </el-form-item>
        </el-form>
      </QupFormContainer>
    </c-title>
    <c-title :loading="shopLoading" title="门店信息">
      <table-box ref="tableBox" show-index no-request :table-config="tableConfig" :data="tableData" />
    </c-title>
    <div class="btn-center">
      <c-button type="default" @click="handleCancel">取消</c-button>
      <c-button type="primary" @click="handleSave">保存</c-button>
    </div>
  </c-back-wrap>
</template>
<script>
import { customerDetail, customerSave } from '@/api/channelTask2/dealerCustomer'
import CustomerArchiveBaseInfo from './customerArchiveBaseInfo'
export default {
  name: 'Edit',
  components: {
    CustomerArchiveBaseInfo
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detail: {},
      loading: false,
      formData: {
        code: '',
        isManageAnomaly: '',
        manageAnomalyType: '',
        manageAnomalyTypeRemark: '',
        enable: '',
        marketType: ''
      },
      tableConfig: {
        hideFuncBar: true,
        tabIndex: 10,
        setting: [
          {
            prop: 'code',
            label: '门店编码',
            minWidth: 120,
            formatData: this.getShopProp('code')
          },
          {
            prop: 'name',
            label: '门店名称',
            minWidth: 120,
            formatData: this.getShopProp('name')
          },
          {
            prop: 'shopNature',
            label: '门店性质',
            minWidth: 120,
            render: (h, row) => {
              return h('c-mdm-view', {
                props: {
                  value: this.getShopProp('shopNature')(row),
                  docCode: 'QY027',
                  label: this.getShopProp('shopNatureName')(row)
                }
              })
            }
          },
          {
            prop: 'shopAddr',
            label: '详细地址',
            minWidth: 130,
            formatData: this.getShopProp('shopAddr')
          },
          {
            prop: 'laseConstructTime',
            label: '最后一次门店建设时间',
            minWidth: 140
          },
          {
            prop: 'expectConstructTime',
            label: '预计下次门店建设时间',
            minWidth: 130,
            render: (h, row) => {
              return h('el-date-picker', {
                props: {
                  type: 'date',
                  valueFormat: 'yyyy-MM-dd HH:mm:ss',
                  value: row.expectConstructTime,
                  clearable: true
                },
                on: {
                  input: v => {
                    this.$set(row, 'expectConstructTime', v)
                  }
                }
              })
            }
          },
          {
            prop: 'isOverdueUndecoration',
            label: '是否超期未装修',
            minWidth: 130,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
            // render: (h, row) => {
            //   return h('c-dict-select', {
            //     props: {
            //       value: row.f2,
            //       dictTypeCode: 'BOOLEANS',
            //       appCode: 'slm',
            //       domainCode: 'marketing',
            //       clearable: true,
            //       placeholder: '是否超期未装修'
            //     },
            //     on: {
            //       input: v => {
            //         this.$set(row, 'isOverdueUndecoration', v)
            //       }
            //     }
            //   })
            // }
          },
          {
            prop: 'overdueUndecorationReason',
            label: '超期未装修原因',
            minWidth: 150,
            render: (h, row) => {
              return h('el-input', {
                props: {
                  value: row.overdueUndecorationReason,
                  clearable: true,
                  placeholder: '超期未装修原因',
                  autosize: { minRows: 1 },
                  type: 'textarea'
                },
                on: {
                  input: v => {
                    this.$set(row, 'overdueUndecorationReason', v)
                  }
                }
              })
            }
          },
          {
            prop: 'isDecoration',
            label: '当前是否装修中',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'belongStage',
            label: '门店建设所属阶段',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BELONG_STAGE'
            }
          },
          {
            prop: 'isKaShop',
            label: '是否KA卖场',
            minWidth: 130,
            render: (h, row) => {
              return h('c-dict-select', {
                props: {
                  value: row.isKaShop,
                  dictTypeCode: 'BOOLEANS',
                  appCode: 'slm',
                  domainCode: 'marketing',
                  clearable: true,
                  placeholder: '是否KA卖场'
                },
                on: {
                  input: v => {
                    this.$set(row, 'isKaShop', v)
                  }
                }
              })
            }
          },
          {
            prop: 'businessTypeName',
            label: '经营业务类型',
            minWidth: 120,
            formatData: this.getShopProp('businessTypeName')
          },
          {
            prop: 'operateArea',
            label: '经营总面积',
            minWidth: 120,
            formatData: this.getShopProp('operateArea')
          },
          {
            prop: 'shopInfoPhone',
            label: '门店咨询电话',
            minWidth: 120,
            formatData: this.getShopProp('shopInfoPhone')
          },
          {
            prop: 'shopServPhone',
            label: '门店售后电话',
            minWidth: 120,
            formatData: this.getShopProp('shopServPhone')
          },
          {
            prop: 'cityLevel',
            label: '城市级别',
            minWidth: 120,
            formatData: this.getShopProp('cityLevelName')
          },
          {
            prop: 'marketLevelName',
            label: '市场层级',
            minWidth: 120,
            formatData: this.getShopProp('marketLevelName')
          },
          {
            prop: 'floor',
            label: '所在楼层',
            minWidth: 100,
            formatData: this.getShopProp('floor')
          },
          {
            prop: 'shopType',
            label: '店铺形态',
            minWidth: 120,
            render: (h, row) => {
              return h('c-mdm-view', {
                props: {
                  value: this.getShopProp('shopType')(row),
                  docCode: 'QY026',
                  label: this.getShopProp('shopPatternName')(row)
                }
              })
            }
          },
          {
            prop: 'shopClassify',
            label: '门店类型',
            minWidth: 120,
            render: (h, row) => {
              return h('c-mdm-view', {
                props: {
                  value: this.getShopProp('shopClassify')(row),
                  docCode: 'QY028',
                  label: this.getShopProp('shopClassifyName')(row)
                }
              })
            }
          }
        ]
      },
      shopLoading: false,
      tableData: []
    }
  },
  computed: {
    formRules() {
      return {
        manageAnomalyType: [{ required: [1, '1'].includes(this.formData.isManageAnomaly), message: '请选择市场异常经营类型', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    handleChange(v) {
      if ([0, '0'].includes(v)) {
        this.$set(this.formData, 'manageAnomalyType', '')
        this.$set(this.formData, 'manageAnomalyTypeRemark', '')
      }
    },
    getShopProp(key) {
      return row => {
        return row[key] || (row.shopDetailDTO || {})[key]
      }
    },
    getDetailData() {
      this.loading = true
      return customerDetail(this.id).then(res => {
        this.detail = res.data
        this.tableData = this.detail.ctmShopDTOS || []
        if (res.data.ctmCustomerDTO && Object.keys(res.data.ctmCustomerDTO).length > 0) {
          for (const k of Object.keys(this.formData)) {
            this.$set(this.formData, k, res.data.ctmCustomerDTO[k])
          }
        } else {
          this.$set(this.formData, 'code', res.data.customerDetailDTO.code)
          this.$set(this.formData, 'enable', res.data.customerDetailDTO.status)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleCancel() {
      this.$goBackCall().then(this.$pageStack.pop)
    },
    async validate() {
      await this.$refs.form.validate()
      return new Promise((resolve, reject) => {
        resolve(this.tableData)
      })
    },
    handleSave() {
      return this.validate().then(() => {
        const data = {
          ...this.detail,
          ctmShopDTOS: this.tableData
        }
        data.ctmCustomerDTO = Object.assign(data.ctmCustomerDTO || {}, this.formData)
        data.ctmCustomerDTO.code = data.customerDetailDTO.code
        data.ctmCustomerDTO.enable = data.customerDetailDTO.status
        // if (!data.ctmCustomerDTO.id) {
        //   data.ctmCustomerDTO.id = data.customerDetailDTO.id
        // }
        return customerSave(data).then(res => {
          this.$message.success('操作成功!')
          this.$pageStack.pop('onPage')
        })
      })
    }
  }
}
</script>
